<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>
        年:<input id="year" type="text">
        月:<input id="month" type="text">
        日:<input id="day" type="text">
        <button id="btn">点击</button>
        <span id="result"></span>
    </p>
</body>
<script>
    // (1)  输入一个1000-9999的年数, 判断是否是闰年?
    // 普通闰年：公历年份是4的倍数，且不是100的倍数的，为闰年（如2004年、2020年等就是闰年）。
    // 世纪闰年：公历年份是整百数的，必须是400的倍数才是闰年（如1900年不是闰年，2000年是闰年）。

    // (2) 输入年月日, 判断输入的数值是否合法?
    // 年份: 1000-9999 整数
    // 月份: 1-12
    // 日期:  
    //      大月(1 3 5 7 8 10 12)  31
    //      小月(4 6 9 11)  30
    //      2月(平年2月28  闰年2月 29)

    // 先判断年份,在判断月份,判断日期 => 合法日期


    // (3) 输入年月日(假设年月日输入均合法), 判断输入的日期是该年的第多少天?

    // 2023-2-1 =>  31 + 1  
    // 2023-9-6 =>  31 + (28|29) + 31 + 30 + 31 + 30 + 31 + 31 + 6

    // 如果是第n月  => 前n-1个月之和 + 当前月的天数


    // 预习: 
    // 选择结构_switch
    // 循环结构_while do...while  for

    var yearInp = document.getElementById("year");
    var monthInp = document.getElementById("month");
    var dayInp = document.getElementById("day");

    var btn = document.getElementById("btn");
    var resultSpan = document.getElementById("result");

    console.log(yearInp, monthInp, dayInp, btn, resultSpan);

    btn.onclick = function () {

        // 变量 => 点击时取的值
        var year = yearInp.value * 1;
        var month = monthInp.value * 1;
        var day = dayInp.value * 1;
        console.log(year, month, day);

        // 作为实际参数传入
        if(isYearOk(year)){
            if(isMonthOk(month)){
                if(isDayOk(year,month,day)){
                    resultSpan.innerText = getTotalDay(year,month,day);
                    resultSpan.style.color = "green";
                    resultSpan.style.fontSize = "12px";
                }else{
                    resultSpan.innerText = "请输入争取的日期";
                    resultSpan.style.color = "red";
                    resultSpan.style.fontSize = "12px";
                }
            }else{
                resultSpan.innerText = "请输入1-12之间的月份";
                resultSpan.style.color = "red";
                resultSpan.style.fontSize = "12px";
            }

        }else{
            resultSpan.innerText = "请输入1000-9999之间的年份";
            resultSpan.style.color = "red";
            resultSpan.style.fontSize = "12px";
        }



    }


    /* function isYearOk(year) {
        if (year >= 1000 && year <= 9999 && year % 1 == 0) {
            return true;
        } else {

            // 不建议在函数封装过程中和页面中的元素有关联, 此时函数的代码不独立(如果调用函数时没有resultSpan将会报错) => 此方法只能在当前页面使用
            resultSpan.innerText = "请输入1000-9999之间的年份";
            resultSpan.style.color = "red";
            resultSpan.style.fontSize = "12px";
            return false;
        }
    } */

    function isYearOk(year) {
        if (year >= 1000 && year <= 9999 && year % 1 == 0) {
            return true;
        } else {
            return false;
        }
    }

    function isMonthOk(month) {
        return month >= 1 && month <= 12 && month % 1 == 0 ? true :false;
    }

    function isRun(year) {
        return year % 4 == 0 && year % 100 != 0 || year % 400 == 0 ? true : false;
    }

    function isDayOk(year,month,day) {
        var maxDay = null;
        switch (month * 1) {
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
                maxDay = 31;
                break;
            case 4:
            case 6:
            case 9:
            case 11:
                maxDay = 30;
                break;
            default:
                if (isRun(year)) {
                    maxDay = 29;
                } else {
                    maxDay = 28;
                }
                break;
        }

        // 此写法只能返回一条数据
        return day >= 1 && day <= maxDay && day % 1 == 0 ? true :false;

        // 如果向返回多条可以借助 数组/对象
        /* var zhang = {
            name:"张三",
            age:18
        }

        if (day >= 1 && day <= maxDay && day % 1 == 0) {
            var obj = {
                status:true,
                message:"日期格式正确"
            }
        } else {
            var obj = {
                status:false,
                message:"请输入1-" + maxDay + "之间的日期"
            }
        }
        return obj; */
    }


    function getTotalDay(year,month,day){
        // 从input取的value值 默认是string, 转数字
        // var year = yearInp.value * 1;
        // var month = monthInp.value * 1;
        // var day = dayInp.value * 1;
        // console.log(year, month, day);


        // 判断平年/闰年  => 确定2月多少天
        var febDay = 28;
        if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
            febDay = 29;
        }

        var result = null;
        if(month == 1){
            result = day;
        }else if(month == 2) {
            result = 31 +  day;
        }else if(month == 3){
            result = 31 + febDay + day;
        }else if(month == 4){
            result = 31 + febDay + 31 +  day;
        }else if(month == 5){
            result = 31 + febDay + 31 + 30 + day;
        }else if(month == 6){
            result = 31 + febDay + 31 + 30 + 31 +  day;
        }else if(month == 7){
            result = 31 + febDay + 31 + 30 + 31 + 30 + day;
        }else if(month == 8 ){
            result = 31 + febDay + 31 + 30 + 31 + 30 + 31 + day;
        }else if(month == 9 ){
            result = 31 + febDay + 31 + 30 + 31 + 30 + 31 +  31 + day;
        }else if(month == 10 ){
            result = 31 + febDay + 31 + 30 + 31 + 30 + 31 +  31 + 30 + day;
        }else if(month == 11 ){
            result = 31 + febDay + 31 + 30 + 31 + 30 + 31 +  31 + 30 + 31 + day;
        }else if(month == 12 ){
            result = 31 + febDay + 31 + 30 + 31 + 30 + 31 +  31 + 30 + 31 + 30 +  day;
        }


        // resultSpan.innerText = result;
        return result;
    }







</script>

</html>